<!--经纪人端实现对艺人的信息进行管理-->
<template>
  <div class="main-container">
    <div class="main-section" @scroll="handleScroll" ref="mainSection">
      <div id="section1" class="section">
        <h2 style="margin-bottom: 0px; color: #2196f3;">DOUDOU演出日程安排</h2>
        <div class="button-container">
          <el-button type="primary" @click="handleNew">添加</el-button>
        </div>
        <el-table :data="tableData" stripe style="width: 100%; height: auto;" :cell-padding="0">
          <el-table-column prop="date" label="活动时间"></el-table-column>
          <el-table-column prop="scheduleName" label="活动名称"></el-table-column>
          <el-table-column prop="location" label="活动地点"></el-table-column>
          <el-table-column prop="startTime" label="活动起始时间"></el-table-column>
          <el-table-column prop="endTime" label="活动结束时间"></el-table-column>
          <el-table-column prop="duration" label="活动持续时长">
            <template #default="{ row }">
              {{ row.duration }}min
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template #default="scope">
              <el-button type="primary" size="small" :icon="Edit" @click="handleEdit(scope.row)">修改</el-button>
              <el-button type="danger" size="small" :icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div id="section2" class="section">
        <h2 style="margin-bottom: 0px; color: #2196f3;">艺人合同管理</h2>
        <div class="button-container">
          <el-button type="primary" @click="handleNewContract">添加</el-button>
        </div>
        <el-table :data="ContractData" stripe style="width: 100%; height: auto;" :cell-padding="0">
          <el-table-column prop="id" label="合同编号"></el-table-column>
          <el-table-column prop="contractName" label="合同标题"></el-table-column>
          <el-table-column prop="startDate" label="起始日期"></el-table-column>
          <el-table-column prop="endDate" label="终止日期"></el-table-column>
          <el-table-column label="状态">
            <template v-slot="scope">
              {{ mapContractStatus(scope.row.contractStatue) }}
            </template>
          </el-table-column>
          <el-table-column prop="contractLink" label="文件链接">
            <template v-slot="scope">
              <a :href="scope.row.link" target="_blank">{{ scope.row.contractLink }}</a>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template #default="scope">
              <el-button type="primary" size="small" :icon="Edit" @click="handleEditContract(scope.row)">修改</el-button>
              <el-button type="danger" size="small" :icon="Delete"
                @click="handleDeleteContract(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div id="section3" class="section" style="height: fit-content; width:100%; margin-bottom: 50px;">
        <h2 style="margin-bottom: 0px; color: #2196f3;">艺人舆情分析</h2>
        <div style=" display: flex; flex-direction: row; margin-top: 30px">
          <el-card class="data-card comment-card" shadow="hover">
            <div class="card-content" slot="header">
              <div class="card-header-container">
                <div class="card-icon">
                  <el-icon>
                    <ChatDotRound />
                  </el-icon>
                </div>
                <div class="card-header-info">
                  <div class="card-title">本月相关话题评论倾向分析</div>
                </div>
              </div>
            </div>
            <div ref="pieChart1" style="width: 600px; height: 400px;"></div>
          </el-card>
          <el-card class="data-card comment-card" shadow="hover">
            <div class="card-content" slot="header">
              <div class="card-header-container">
                <div class="card-icon">
                  <el-icon>
                    <User />
                  </el-icon>
                </div>
                <div class="card-header-info">
                  <div class="card-title">本月相关话题参与用户画像</div>
                </div>
              </div>
            </div>
            <div ref="pieChart2" style="width: 600px; height: 400px;"></div>
          </el-card>
        </div>
        <div style="width: 100%; margin-top: 20px;"></div>
        <el-card class="chart-card trend-chart-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <div class="header-title">
                <el-icon>
                  <DataLine />
                </el-icon>
                <div class="card-title">{{ this.trendChartPrompt }}</div>
              </div>
              <div style="float:right" class="button-container">
                <el-button type="primary" @click="changeChart">切换图表</el-button>
              </div>
            </div>
          </template>
          <div ref="trendChart" style="width: 1500px; height: 400px;"></div>
        </el-card>
      </div>
      <div id="section4" class="section">
        <h2 style="margin-bottom: 10px; color: #2196f3;">艺人形象</h2>
        <img src="../../assets/DOUDOU1.jpg" alt="Description of image"
          style="width:500px;height:auto;">
      </div>
      <div id="section5" class="section">
        <div id="section5" class="section">
          <h2 style="margin-bottom: 0px; color: #2196f3;">作品管理</h2>
          <div class="button-container">
            <el-button type="primary" @click="handleNewWork">新增作品</el-button>
          </div>
          <el-table :data="worksData" stripe style="width: 100%">
            <el-table-column prop="workName" label="作品名称"></el-table-column>
            <el-table-column prop="type" label="类型"></el-table-column>
            <el-table-column prop="releaseDate" label="发布日期"></el-table-column>
            <el-table-column prop="workLink" label="作品链接"></el-table-column>
            <el-table-column label="操作" width="180">
              <template #default="scope">
                <el-button type="primary" size="small" @click="handleEditWork(scope.row)">编辑</el-button>
                <el-button type="danger" size="small" @click="handleDeleteWork(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="sidebar">
      <ul>
        <li @click="scrollToSection('section1')" :class="{ active: currentSection === 'section1' }">DOUDOU演出日程安排</li>
        <li @click="scrollToSection('section2')" :class="{ active: currentSection === 'section2' }">艺人合同管理</li>
        <li @click="scrollToSection('section3')" :class="{ active: currentSection === 'section3' }">艺人舆情分析</li>
        <li @click="scrollToSection('section4')" :class="{ active: currentSection === 'section4' }">艺人形象</li>
        <li @click="scrollToSection('section5')" :class="{ active: currentSection === 'section5' }">作品管理</li>
      </ul>
    </div>
  </div>
  <el-dialog title="新增行程信息" v-model="NewArtistVisible" :visible.sync="NewArtistVisible" width="50%"
    :before-close="handleClose">
    <el-form :model="ruleForm" :rules="rules" ref="newFormRef" label-width="100px" class="demo-ruleForm">
      <el-form-item label="活动日期" prop="date">
        <el-input v-model="ruleForm.date"></el-input>
      </el-form-item>
      <el-form-item label="活动名称" prop="scheduleName">
        <el-input v-model="ruleForm.scheduleName"></el-input>
      </el-form-item>
      <el-form-item label="活动地点" prop="location">
        <el-input v-model="ruleForm.location"></el-input>
      </el-form-item>
      <div class="block">
        <el-form-item label="活动时段" prop="timeRange">
          <el-slider v-model="value" range :min="0" :max="132" :step="1" :marks="marks" :format-tooltip="formatTooltip">
          </el-slider>
        </el-form-item>
      </div>
      <el-form-item>
        <el-button type="primary" @click="submitForm('newFormRef')">立即创建</el-button>
        <el-button @click="resetForm('newFormRef')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-dialog title="修改行程信息" v-model="EditArtistVisible" :visible.sync="EditArtistVisible" width="50%"
    :before-close="handleClose">
    <el-form :model="ruleForm" :rules="rules" ref="editFormRef" label-width="100px" class="demo-ruleForm">
      <el-form-item label="活动时间" prop="date">
        <el-input v-model="ruleForm.date"></el-input>
      </el-form-item>
      <el-form-item label="活动名称" prop="scheduleName">
        <el-input v-model="ruleForm.scheduleName"></el-input>
      </el-form-item>
      <el-form-item label="活动地点" prop="location">
        <el-input v-model="ruleForm.location"></el-input>
      </el-form-item>
      <el-form-item label="活动时段" prop="timeRange">
        <el-slider v-model="value" range :min="0" :max="132" :step="1" :marks="marks" :format-tooltip="formatTooltip">
        </el-slider>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('editFormRef')">立即修改</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-dialog :title="workDialogTitle" v-model="workDialogVisible" width="40%" :before-close="handleWorkClose">
    <el-form ref="workFormRef" :model="workForm" :rules="workRules" label-width="100px">
      <el-form-item label="作品名称" prop="workName">
        <el-input v-model="workForm.workName"></el-input>
      </el-form-item>
      <el-form-item label="作品类型" prop="type">
        <el-select v-model="workForm.type" placeholder="请选择">
          <el-option label="单曲" value="单曲"></el-option>
          <el-option label="专辑" value="专辑"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="发布日期" prop="releaseDate">
      <el-date-picker v-model="workForm.releaseDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="作品链接" prop="workLink">
      <el-input v-model="workForm.workLink"></el-input>
    </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitWorkForm">提交</el-button>
        <el-button @click="resetWorkForm">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!--contract pop-up windows-->
  <!--添加合同-->
  <el-dialog title="创建新合同" v-model="newContract" :visible.sync="newContract" width="30%" :before-close="handleClose">
    <el-form :model="contractForm" :rules="contractRules" ref="newContractFormRef" label-width="100px" class="demo-ruleForm">
      <el-form-item label="合同标题" prop="contractName">
        <el-input v-model="contractForm.contractName"></el-input>
      </el-form-item>
      <el-form-item label="起始时间" prop="startDate">
        <el-input v-model="contractForm.startDate"></el-input>
      </el-form-item>
      <el-form-item label="结束时间" prop="endDate">
        <el-input v-model="contractForm.endDate"></el-input>
      </el-form-item>
      <el-form-item label="合同状态">
        <el-select v-model="contractForm.contractStatue" placeholder="请选择活动状态">
          <el-option label="未确认" value="PENDING"></el-option>
          <el-option label="有效" value="ACTIVE"></el-option>
          <el-option label="已结束" value="TERMINATED"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="文件链接" prop="contractLink">
        <el-input v-model="contractForm.contractLink"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitContractForm('newContractFormRef')">立即创建</el-button>
        <el-button @click="resetForm('newContractFormRef')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!--修改合同-->
  <el-dialog title="修改合同信息" v-model="editContract" :visible.sync="editContract" width="30%" :before-close="handleClose">
    <el-form :model="contractForm" :rules="contractRules" ref="newContractFormRef" label-width="100px"
      class="demo-ruleForm">
      <el-form-item label="合同标题" prop="contractName">
        <el-input v-model="contractForm.contractName"></el-input>
      </el-form-item>
      <el-form-item label="起始时间" prop="startDate">
        <el-input v-model="contractForm.startDate"></el-input>
      </el-form-item>
      <el-form-item label="结束时间" prop="endDate">
        <el-input v-model="contractForm.endDate"></el-input>
      </el-form-item>
      <el-form-item label="合同状态">
        <el-select v-model="contractForm.contractStatue" placeholder="请选择活动状态">
          <el-option label="未确认" value="PENDING"></el-option>
          <el-option label="有效" value="ACTIVE"></el-option>
          <el-option label="已结束" value="TERMINATED"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="文件链接" prop="contractLink">
        <el-input v-model="contractForm.contractLink"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitContractForm('newContractFormRef')">立即修改</el-button>
        <el-button @click="resetForm('newContractFormRef')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import axios from 'axios'
import request from '@/utils/request'
import * as echarts from 'echarts'
import {
  ChatDotRound,
  ArrowUp,
  ArrowDown,
  More,
  Money,
  User,
  Star,
  Calendar,
  TrendCharts,
  Histogram,
  DataLine,
  Timer,
  Check,
  Delete
} from '@element-plus/icons-vue';
import { markRaw } from 'vue';
export default {
  components: {
    ChatDotRound,
    ArrowUp,
    ArrowDown,
    More,
    Money,
    User,
    Star,
    Calendar,
    TrendCharts,
    Histogram,
    DataLine,
    Timer,
    Check,
    Delete
  },
  data() {
    const generateMarks = () => {
      let marks = {};
      for (let i = 0; i <= 132; i += 6) { // 每30分钟一个标记（6步*5分钟）
        const hours = Math.floor(i * 5 / 60) + 12;
        const minutes = (i * 5) % 60;
        marks[i] = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
      }
      return marks;
    };
    return {
      value: [0, 132], // 默认选中全天（12:00-23:00）
      marks: generateMarks(),
      editedScheduleid: -1,
      currentSection: 'section1',
      tableData: [
        {
          id: '1',
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          startime: '19:00',
          endtime: '21:00'
        },
        {
          id: '2',
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St',
          startime: '19:00',
          endtime: '21:00'
        },
      ],
      ruleForm: {
        id: '',
        date: '',
        scheduleName: '', // 活动名称
        location: '',     // 活动地点
        startTime: '',    // 开始时间(完整时间)
        endTime: '',  
        duration: '',
        artistId:'',
      },
      rules: {
        date: [
          { type: 'date', required: true, message: '请输入日期', trigger: 'change' }
        ],

        // 更新验证规则使用正确的属性名
        scheduleName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ],
        location: [
          { required: true, message: '请输入活动地点', trigger: 'change' }
        ],


      },
      worksData: [],
      workDialogVisible: false,
      workDialogTitle: '新增作品',
      currentWorkId: null,
      workForm: {
        workName: '',  // 修改字段名
        type: '',
        releaseDate: '',
        workLink: '',   // 修改字段名
        artistId:''
      },
    workRules: {
      workName: [   // 字段名改为 workName
        { required: true, message: '请输入作品名称', trigger: 'blur' }
      ],
      type: [
        { required: true, message: '请选择作品类型', trigger: 'change' }
      ],
      releaseDate: [
        { required: true, message: '请选择发布日期', trigger: 'change' }
      ],
      workLink: [   // 字段名改为 workLink
        { required: true, message: '请输入作品链接', trigger: 'blur' },
        { type: 'url', message: '请输入有效的URL地址', trigger: 'blur' }
      ],
      artistId: [
        { required: true, message: '艺人ID不能为空', trigger: 'blur' }
  ]
    },
      NewArtistVisible: false,
      EditArtistVisible: false,


      //contract
      newContract: false,
      editContract: false,
      editContractID: -1,
      contractForm: {
        id: '',
        contractName: '',
        contractType: 'ARTIST_CONTRACT',
        personId: 1,
        startDate:'',
        endDate: '',
        contractStatue: '',
        contractLink: ''
      },
      ContractData: [],
      //新合同表单，更改合同表单确认
      contractRules: {
        contractName: [
          { required: true, message: '请输入合同标题', trigger: 'change' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        startDate: [
          { type: 'date', required: true, message: '请输入日期', trigger: 'change' }
        ],
        endDate: [
          { type: 'date', required: true, message: '请输入日期', trigger: 'change' }
        ]
      },

      //publicOpinion
      commentChartInstance: null,
      groupChartInstance: null,
      trendChartInstance: null,
      commentData: null,
      trendChartSelect: 1,
      options1: null,
      options2: null,
      options3_1: null,
      options3_2: null,
      trendChartPrompt: null,
      commentData: { // 饼状图1的数据
        positiveComment: [
          12349, 12398, 24821, 12381, 24343, 23345, 12345, 17890, 18328, 18881, 23441, 10000
        ],
        negativeComment: [
          15165, 12312, 12323, 15521, 16642, 12333, 24545, 13223, 24545, 12223, 15512, 15000
        ],
        neutralComment: [
          12375, 12095, 12325, 13665, 16325, 12425, 12425, 12355, 13722, 18873, 10692, 10000
        ]
      },
      groupData: [ // 饼状图2的数据
        { value: 100, name: '粉丝用户' },
        { value: 100, name: '一般用户' },
        { value: 100, name: '黑名单用户' }
      ],

    };

  },
  methods: {
    formatTooltip(val) {
      const totalMinutes = val * 5;
      const hours = Math.floor(totalMinutes / 60) + 12;
      const minutes = totalMinutes % 60;
      return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
    },

    handleScroll(event) {
      const mainSection = event.target;
      const sections = ['section1', 'section2', 'section3', 'section4', 'section5'];
      const containerMid = mainSection.clientHeight / 2; // 容器中间点
      let closestSection = this.currentSection;
      let minDistance = Infinity; // 初始最小距离设为极大值

      sections.forEach(section => {
        const rect = document.getElementById(section).getBoundingClientRect();
        const sectionMid = (rect.top + rect.bottom) / 2; // 当前 section 的中间点
        const distance = Math.abs(sectionMid - containerMid); // 计算与容器中点的距离

        // 如果当前 section 更接近中点，更新最小距离和选中 section
        if (distance < minDistance) {
          minDistance = distance;
          closestSection = section;
        }
      });

      this.currentSection = closestSection;
    },
    scrollToSection(sectionId) {
      const section = document.getElementById(sectionId);
      section.scrollIntoView({ behavior: 'smooth' });
      this.currentSection = sectionId;
    },
    //获取行程
    getschedule() {
      request.get('/getDOUDOUSchedule')
        .then(res => {
          if (res.data.code === 200) {
            this.tableData = res.data.data.map(item => {
              // 提取日期和时间
              let date = '';
              let startTime = '';
              let endTime = '';
              
              if (item.startTime) {
                // 处理ISO格式时间
                const [datePart, timePart] = item.startTime.split('T');
                date = datePart;
                startTime = timePart ? timePart.substring(0, 5) : '';
              }
              
              if (item.endTime) {
                // 处理结束时间
                const timePart = item.endTime.includes('T') 
                  ? item.endTime.split('T')[1]
                  : item.endTime;
                endTime = timePart ? timePart.substring(0, 5) : '';
              }
              
              // 计算持续时间
              const duration = startTime && endTime 
                ? this.calculateDurationFromTimes(startTime, endTime)
                : 0;
              
              return {
                ...item,
                date,
                startTime,
                endTime,
                duration,
              };
            });
          } else {
            this.$message.error(res.data.msg || '获取行程失败');
          }
        })
        .catch(err => {
          console.error('获取行程失败:', err);
          this.$message.error('获取行程失败，请检查网络连接');
        });
    },
    calculateDurationFromTimes(startTimeStr, endTimeStr) {
      try {
        const [startHours, startMinutes] = startTimeStr.split(':').map(Number);
        const [endHours, endMinutes] = endTimeStr.split(':').map(Number);
        
        const startTotalMinutes = startHours * 60 + startMinutes;
        const endTotalMinutes = endHours * 60 + endMinutes;
        
        return endTotalMinutes - startTotalMinutes;
      } catch (e) {
        console.error('计算持续时间失败:', e);
        return 0;
      }
    },
    calculateDuration(start, end) {
      const startTime = new Date(start);
      const endTime = new Date(end);
      return Math.round((endTime - startTime) / (1000 * 60));
    },
    //处理行程更改的表单提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 构建完整时间
          const startTime = `${this.ruleForm.date}T${this.formatTooltip(this.value[0])}:00`;
          const endTime = `${this.ruleForm.date}T${this.formatTooltip(this.value[1])}:00`;
          
          const payload = {
            scheduleName: this.ruleForm.scheduleName,
            location: this.ruleForm.location,
            startTime,
            endTime,
            artistId:1,
          };
          
          // 计算持续时间（分钟）
          const startDateTime = new Date(startTime);
          const endDateTime = new Date(endTime);
          const duration = Math.round((endDateTime - startDateTime) / (1000 * 60));
          
          // 如果是编辑操作，添加ID
          if (this.editedScheduleid !== -1) {
            payload.id = this.editedScheduleid;
          }
          
          const url = this.editedScheduleid !== -1 
            ? `/updateDOUDOUSchedule/${this.editedScheduleid}`
            : '/addDOUDOUSchedule';
            
          const method = this.editedScheduleid !== -1 ? 'put' : 'post';
          
          request[method](url, payload)
            .then(res => {
              if (res.data.code === 200) {
                this.$message.success(this.editedScheduleid !== -1 ? '更新成功' : '添加成功');
                this.getschedule();
                this.resetForm(formName);
                
                if (this.editedScheduleid !== -1) {
                  this.EditArtistVisible = false;
                } else {
                  this.NewArtistVisible = false;
                }
              } else {
                this.$message.error(res.data.msg || '操作失败');
              }
            })
            .catch(err => {
              console.error('操作失败:', err);
              this.$message.error('操作失败，请稍后重试');
            });
        } else {
          console.log('表单验证失败');
          return false;
        }
      });
    },
    //重置行程更改的表单
    resetForm(formName) {
      this.$refs[formName].resetFields()

      // 重置滑动条状态
      this.value = [0, 132] // 恢复默认时间范围（12:00-23:00）

      // 清空时间字段（如需要）
      this.ruleForm.startime = ''
      this.ruleForm.endtime = ''
    },
    // 删除行程（包含状态处理）
    handleDelete(row) {
      this.$confirm('确定删除此行吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.delete(`/deleteDOUDOUSchedule/${row.id}`)
          .then(res => {
            if (res.data.code === 200) {
              this.$message.success('删除成功');
              this.getschedule(); // 刷新数据
            } else {
              this.$message.error(res.data.msg || '删除失败');
            }
          })
          .catch(err => {
            console.error('删除失败:', err);
            this.$message.error('删除失败');
          });
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    //行程表单当中滑动按钮功能的实现
    timeToSliderValue(timeStr) {
      if (!timeStr) return 60; // 默认值
      
      try {
        // 尝试多种可能的格式
        let timePart = timeStr;
        if (timeStr.includes('T')) {
          // 处理ISO格式: "2023-01-01T13:00:00"
          timePart = timeStr.split('T')[1].substring(0, 5);
        } else if (timeStr.includes(' ')) {
          // 处理空格分隔格式: "2023-01-01 13:00:00"
          timePart = timeStr.split(' ')[1].substring(0, 5);
        }
        
        // 提取小时和分钟
        const [hoursStr, minutesStr] = timePart.split(':');
        let hours = parseInt(hoursStr);
        const minutes = parseInt(minutesStr || '0');
        
        // 转换为滑块值（从12:00开始）
        return Math.max(0, Math.min(132, (hours - 12) * 12 + Math.floor(minutes / 5)));
      } catch (e) {
        console.error('转换时间到滑块值失败:', e);
        return 60; // 默认值
      }
    },
    //处理修改行程按钮点击
    handleEdit(row) {
      console.log('正在编辑行数据:', row);
      this.editedScheduleid = row.id;
      
      // 直接使用表格行数据初始化表单
     this.ruleForm = {
        // 使用表格中显示的字段名称
        scheduleName: row.scheduleName, // 活动名称
        location: row.location,      // 活动地点
        date: row.date                              // 活动日期
      };
      
      // 解析时间（使用原始数据）
      const startTime = row.startTime || row.startime;
      const endTime = row.endTime || row.endtime;
      
      try {
        // 将时间字符串转换为滑块值
        if (startTime && endTime) {
          this.value = [
            this.timeToSliderValue(startTime),
            this.timeToSliderValue(endTime)
          ];
        } else {
          // 默认时间段：下午1点-2点
          this.value = [60, 120];
        }
      } catch (e) {
        console.error('设置滑块值失败:', e);
        this.value = [60, 120]; // 使用默认值
      }
      
      this.EditArtistVisible = true;
    },
    
    formatDate(dateObj) {
      if (!dateObj || isNaN(dateObj)) return '';
      
      try {
        const year = dateObj.getFullYear();
        const month = (dateObj.getMonth() + 1).toString().padStart(2, '0');
        const day = dateObj.getDate().toString().padStart(2, '0');
        return `${year}-${month}-${day}`;
      } catch (e) {
        console.error('格式化日期失败:', e);
        return '';
      }
    },
    
    // 安全的ISO字符串解析方法
    parseISOString(isoString) {
      if (!isoString) return null;
      
      try {
        // 处理各种可能的格式
        let normalized = isoString;
        
        // 处理缺少秒数的情况
        if (isoString.includes('T') && isoString.length === 16) {
          normalized += ':00';
        }
        
        // 处理缺少时区的情况
        if (!normalized.endsWith('Z') && normalized.indexOf('+') === -1) {
          normalized += 'Z';
        }
        
        const dateObj = new Date(normalized);
        
        // 检查日期是否有效
        if (isNaN(dateObj.getTime())) {
          console.warn('无效的日期:', isoString);
          return null;
        }
        
        return dateObj;
      } catch (e) {
        console.error('解析时间失败:', e);
        return null;
      }
    },
    
    // 将Date对象转换为滑块值
    dateTimeToSliderValue(dateTime) {
      if (!dateTime || isNaN(dateTime)) return 60; // 默认值
      
      try {
        const hours = dateTime.getHours();
        const minutes = dateTime.getMinutes();
        
        // 转换为滑块值（从12:00开始）
        return Math.max(0, Math.min(132, (hours - 12) * 12 + Math.floor(minutes / 5)));
      } catch (e) {
        console.error('转换时间到滑块值失败:', e);
        return 60; // 默认值
      }
    },
    //处理新增表单按钮点击
    handleNew() {
      this.value = [0, 132]
      this.ruleForm.startime = ''
      this.ruleForm.endtime = ''
      this.editedScheduleid = -1;
      this.ruleForm = {
        id: '',
        date: '',
        name: '',
        address: '',
        startime: '',
        endtime: '',
        duration: '',
        artistId:1
      }
      this.NewArtistVisible = true;
    },
    async fetchWorks() {
      try {
        const res = await request.get('/api/works');
        this.worksData = res.data.data;
      } catch (error) {
        this.$message.error('获取作品列表失败');
      }
    },

    // 提交作品表单
    submitWorkForm() {
      this.$refs.workFormRef.validate(async valid => {
        if (valid) {
          try {
            // 确保 artistId 有值
            if (!this.workForm.artistId) {
            this.workForm.artistId = 1; // 默认值或从上下文中获取
          }
        
          let url, method;
          if (this.workForm.id) {
            // 修改操作：包含 ID
            url = `/api/works/${this.workForm.id}`;
            method = 'put';
          } else {
            // 新增操作：不包含 ID
            url = '/api/works';
            method = 'post';
          }
        
        // 发送请求
          const res = await request[method](url, this.workForm);
        
          if (res.data.code === 200) {
            this.$message.success(res.data.msg);
            this.fetchWorks();
            this.workDialogVisible = false;
          } else {
            this.$message.error(res.data.msg || '操作失败');
          }
        } catch (error) {
        this.$message.error('操作失败');
        console.error('操作失败:', error);
        }
      }
    });
  },

    // 重置表单
    resetWorkForm() {
      if (this.$refs.workFormRef) {
      this.$refs.workFormRef.resetFields();
      }
      this.currentWorkId = null;
      this.workForm = {
        id:'',
        workName: '',
        type: '',
        releaseDate: '',
        workLink: '', 
      };
    },


    // 打开新增对话框
    handleNewWork() {
    this.workDialogTitle = '新增作品';
    this.workDialogVisible = true;
    this.$nextTick(() => {
    this.resetWorkForm();
    // 设置默认的艺人ID（实际应用中应从当前上下文获取）
    this.workForm.artistId = 1;
    this.$refs.workFormRef?.clearValidate();
    });
    },

    // 打开编辑对话框
    handleEditWork(row) {
      this.workDialogTitle = '编辑作品';
      this.workDialogVisible = true;
      console.log('开始编辑作品, 行数据:', row);
      this.$nextTick(() => {
      this.workForm = {
        id: row.id,             // 设置 ID
        workName: row.workName,
        type: row.type,
        releaseDate: row.releaseDate,
        workLink: row.workLink,
        artistId: row.artistId  // 设置艺人 ID
      };
      this.$refs.workFormRef?.clearValidate();
    });
    },
    // 删除作品
    handleDeleteWork(row) {
      this.$confirm('确认删除该作品吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
      try {
        // 确保使用正确的路径参数格式
        await request.delete(`/api/works/${row.id}`);
        this.$message.success('删除成功');
        this.fetchWorks();
      } catch (error) {
        this.$message.error('删除失败');
        console.error('删除失败:', error);
      }
    }).catch(() => {});
    },

    handleWorkClose(done) {
      this.resetWorkForm();
      done();
    },
    parseTimeToMinutes(timeStr) {
      const [hours, minutes] = timeStr.split(':').map(Number)
      return hours * 60 + minutes
    },

    //contract
    getContract() {
      request.get(`/getContract/ARTIST_CONTRACT/1`).then(res => {
        console.log(res)
        this.ContractData = res.data.data;
      });
    },

    mapContractStatus(status) {
      const statusMap = {
        'ACTIVE': '有效',
        'PENDING': '未确认',
        'TERMINATED': '终止'
      };
      return statusMap[status] || status; // 未匹配则返回原值
    },
    
    handleNewContract() {
      this.newContract = true;
      this.contractForm = {
        contractName: '',
        contractType: 'ARTIST_CONTRACT',
        personId: 1,
        startDate:'',
        endDate: '',
        contractStatue: '',
        contractLink: ''
      };
    },
    handleEditContract(row) {
      this.editContractID = row.id; // 记录当前编辑的索引
      this.contractForm = {
        id: row.id,
        contractType: "ARTIST_CONTRACT",
        personId: 1,
        contractName: row.contractName,
        startDate: row.startDate,
        endDate: row.endDate,
        contractStatue: row.contractStatue, // 使用原始状态值
        contractLink: row.contractLink
      };// 复制当前行数据到表单
      this.editContract = true; // 打开对话框
      // 重置表单校验状态
      // if (this.$refs.editFormRef) {
      //   this.$refs.editFormRef.resetFields()
      // }
    },

    handleDeleteContract(row) {
      this.$confirm('确定删除此合同吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.delete(`/deleteContract/${row.id}`).then(res => {
          if (res.data.code === 200) {
            // 删除成功，刷新数据
            this.$message.success('删除成功');
            this.getContract()
          } else {
            this.$message.success('删除失败');
          }
        }).catch(err => {
          console.error('删除合同失败:', err)
          this.$message.error('删除合同失败')
        })
      }).catch(() => { });
    },
    
    submitContractForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.editContract === true) {
            request.put(`/updateContract/${this.editContractID}`, this.contractForm).then(res => {
              if (res.data.code === 200) {
                // 更新成功，刷新数据
                this.$message.success('更新成功')
                this.getContract()
                // 关闭对话框
                this.editContract = false
                this.editContractID == -1
                this.contractForm = {
                  contractName: '',
                  startDate: '',
                  endDate: '',
                  contractStatue: '',
                  contractLink: ''
                }
              } else {
                this.$message.error(res.data.msg || '修改合同失败')
              }
            }).catch(err => {
              console.error('更新合同失败:', err)
              this.$message.error('更新合同失败')
            })
          }
          else if (this.newContract === true) {
            request.post('/addContract', this.contractForm).then(res => {
              if (res.data.code === 200) {
                // 添加成功，刷新数据
                this.$message.success('添加合同成功')
                this.getContract()
                // 关闭对话框
                this.newContract = false
              }
              else {
                this.$message.error('添加合同失败')
              }
            }).catch(err => {
              console.error('添加合同失败:', err)
              this.$message.error('添加合同失败')
            })
          }
        } else {
          console.log('提交失败!!');
          return false;
        }
      });
    },

    //publicOpinion

    async chartInit() {
      this.commentChartInstance = echarts.init(this.$refs.pieChart1);
      this.groupChartInstance = echarts.init(this.$refs.pieChart2);
      this.trendChartInstance = markRaw(echarts.init(this.$refs.trendChart));

      this.commentData = (await axios.get('/getCommentData')).data.data;
      this.groupData = (await axios.get('/getUserGroupData')).data.data;

      this.options1 = {
        tooltip: {
          trigger: 'item', // 触发类型为数据项触发
          position: 'left',
          confine: true,
        },
        legend: { // 图例组件
          top: '0%', // 图例组件离容器顶部的距离
          orient: 'vertical',
          left: '10%', // 图例组件的水平位置
          fontSize: '20',
        },
        series: [ // 系列列表，每个系列通过 type 决定自己的图表类型
          {
            name: '评论倾向分析', // 系列名称
            type: 'pie', // 指定图表类型为饼图
            radius: ['0%', '90%'], // 饼图的半径，可以是具体数值或百分比
            avoidLabelOverlap: true, // 是否避免标签重叠
            itemStyle: { // 图形样式
              borderRadius: 10, // 扇区圆角
              borderColor: '#fff', // 扇区边框颜色
              borderWidth: 5 // 扇区边框宽度
            },
            label: { // 数据标签
              show: true, // 是否显示
              position: 'outside', // 标签位置
            },
            emphasis: { // 高亮样式
              label: {
                show: true, // 高亮时是否显示标签
                fontWeight: 'bold' // 高亮时标签字体粗细
              }
            },
            labelLine: { // 标签的视觉引导线
              show: false // 是否显示
            },
            data: [
              { value: this.commentData.positiveComment[this.commentData.positiveComment.length - 1], name: '正面评论' },
              { value: this.commentData.negativeComment[this.commentData.negativeComment.length - 1], name: '负面评论' },
              { value: this.commentData.neutralComment[this.commentData.neutralComment.length - 1], name: '中立评论' },
            ]
          }
        ]
      };
      this.options2 = {
        tooltip: {
          trigger: 'item',
          position: 'left',
          confine: true,
        },
        legend: {
          top: '0%',
          orient: 'vertical',
          left: '10%',
          fontSize: '20',
        },
        series: [
          {
            name: '相关话题用户群体分析',
            type: 'pie',
            radius: ['0%', '90%'],
            avoidLabelOverlap: true,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 5
            },
            label: {
              show: true,
              position: 'outside',
            },
            emphasis: {
              label: {
                show: true,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: this.groupData.fans[this.groupData.fans.length - 1], name: '粉丝用户' },
              { value: this.groupData.anonymous[this.groupData.anonymous.length - 1], name: '一般用户' },
              { value: this.groupData.blacklist[this.groupData.blacklist.length - 1], name: '黑名单用户' },
            ]
          }
        ]
      };
      this.options3_1 = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            console.log(params);
            return params.seriesName + '<br/>' +
              params.name + ': ' + params.value;
          }
        },
        legend: {
          data: ['正面评论', '负面评论', '中立评论'],
        },
        xAxis: {
          type: 'category',
          data: ['5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月', '4月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '正面评论',
            type: 'line',
            data: this.commentData.positiveComment,
            smooth: true,
            emphasis: {
              lineStyle: {
                width: 5
              }
            }
          },
          {
            name: '负面评论',
            type: 'line',
            data: this.commentData.negativeComment,
            smooth: true,
            emphasis: {
              lineStyle: {
                width: 5
              }
            }
          },
          {
            name: '中立评论',
            type: 'line',
            data: this.commentData.neutralComment,
            smooth: true,
            emphasis: {
              lineStyle: {
                width: 5
              }
            }
          },
        ]
      };
      this.options3_2 = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            console.log(params);
            return params.seriesName + '<br/>' +
              params.name + ': ' + params.value;
          }
        },
        legend: {
          data: ['粉丝用户', '一般用户', '黑名单用户'],
        },
        xAxis: {
          type: 'category',
          data: ['5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月', '4月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '粉丝用户',
            type: 'line',
            data: this.groupData.fans,
            smooth: true,
            emphasis: {
              lineStyle: {
                width: 5
              }
            }
          },
          {
            name: '一般用户',
            type: 'line',
            data: this.groupData.anonymous,
            smooth: true,
            emphasis: {
              lineStyle: {
                width: 5
              }
            }
          },
          {
            name: '黑名单用户',
            type: 'line',
            data: this.groupData.blacklist,
            smooth: true,
            emphasis: {
              lineStyle: {
                width: 5
              }
            }
          },
        ]
      };

      this.commentChartInstance.setOption(this.options1);
      this.groupChartInstance.setOption(this.options2);
      this.trendChartInstance.setOption(this.options3_1);
      this.trendChartPrompt = '各类评论数量趋势';

    },
    changeChart() {
      if (this.trendChartSelect === 1) {
        this.trendChartInstance.setOption(this.options3_2);
        this.trendChartSelect = 2;
        this.trendChartPrompt = '各类用户数量趋势';
      }
      else {
        this.trendChartInstance.setOption(this.options3_1);
        this.trendChartSelect = 1;
        this.trendChartPrompt = '各类评论数量趋势';
      }
    }
  },
  mounted() {
    this.getschedule();
    this.fetchWorks();
    this.getContract();
    this.chartInit();
  }
};
</script>

<style scoped>
.main-container {
  display: flex;
}

.main-section {
  flex: 1;
  overflow-y: scroll;
  height: 800px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.main-section::-webkit-scrollbar {
  display: none;
}

.section {
  height: 700px;
  padding: 20px;
}

.button-container {
  display: flex;
  justify-content: flex-end;
  /* 将按钮对齐到容器的最右边 */
  margin-bottom: 10px;
  /* 可选：添加一些底部边距，以便按钮和表格之间有一些空间 */
}

.sidebar {
  width: 200px;
  padding: 20px;
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
}

.sidebar li {
  cursor: pointer;
  margin: 10px 0;
  padding: 8px;
  position: relative;
  transition: all 0.3s ease;
  border-radius: 6px;
}

.sidebar li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 6px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sidebar li:hover {
  transform: translateX(5px);
}

.sidebar li:hover::before {
  opacity: 1;
}

.sidebar li.active {
  font-weight: bold;
  color: #2196f3;
}

.el-form-item {
  margin-bottom: 22px;
}

.dashboard-container {
  padding: 24px;
  background-color: #f5f7fa;
  min-height: 100%;
  overflow-x: hidden;
}

.data-cards {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.data-card {
  flex: 1;
  margin-right: 16px;
  text-align: left;
  border-radius: 8px;
  transition: all 0.3s;
  min-width: 220px;
  max-width: 50%;
  position: relative;
  overflow: hidden;
}

.data-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.data-card:last-child {
  margin-right: 0;
}

.comment-card {
  border-left: 4px solid #409EFF;
}

.revenue-card {
  border-left: 4px solid #409EFF;
}

.followers-card {
  border-left: 4px solid #67C23A;
}

.artists-card {
  border-left: 4px solid #E6A23C;
}

.contracts-card {
  border-left: 4px solid #F56C6C;
}

.card-content {
  padding: 0px 16px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  height: 100%;
}

.card-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.03;
  z-index: -1;
}

.revenue-card .card-content::before {
  background-color: #409EFF;
}

.followers-card .card-content::before {
  background-color: #67C23A;
}

.artists-card .card-content::before {
  background-color: #E6A23C;
}

.contracts-card .card-content::before {
  background-color: #F56C6C;
}

.card-header-container {
  display: flex;
  align-items: center;
  margin-bottom: 0px;
  line-height: 100px;
}

.card-header-info {
  display: flex;
  justify-content: space-between;
  flex: 1;
  align-items: center;
}

.card-value-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 20px;
  flex-shrink: 0;
}

.revenue-card .card-icon {
  background-color: rgba(64, 158, 255, 0.1);
  color: #409EFF;
}

.followers-card .card-icon {
  background-color: rgba(103, 194, 58, 0.1);
  color: #67C23A;
}

.artists-card .card-icon {
  background-color: rgba(230, 162, 60, 0.1);
  color: #E6A23C;
}

.contracts-card .card-icon {
  background-color: rgba(245, 108, 108, 0.1);
  color: #F56C6C;
}

.card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.card-title {
  font-size: 20px;
  color: #909399;
  font-weight: 500;
}

.card-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin: 0;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 10px;
}

.card-trend,
.card-info {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.card-trend.up {
  color: #67C23A;
}

.card-trend.down {
  color: #F56C6C;
}

.card-info {
  color: #909399;
}

.charts-container {
  margin-bottom: 24px;
}

.chart-card {
  margin-bottom: 24px;
  border-radius: 8px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.chart-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.chart-card .el-card__body {
  padding: 0;
}

.follower-chart-card {
  border-top: 4px solid #67C23A;
}

.follower-chart-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(103, 194, 58, 0.05) 0%, rgba(255, 255, 255, 0) 60%);
  z-index: 0;
  pointer-events: none;
}

.revenue-chart-card {
  border-top: 4px solid #409EFF;
}

.revenue-chart-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(64, 158, 255, 0.05) 0%, rgba(255, 255, 255, 0) 60%);
  z-index: 0;
  pointer-events: none;
}

.activities-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-top: 4px solid #E6A23C;
}

.activities-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(230, 162, 60, 0.05) 0%, rgba(255, 255, 255, 0) 60%);
  z-index: 0;
  pointer-events: none;
}

.activities-card .el-card__body {
  flex: 1;
  overflow: hidden;
  padding: 0;
}

.trend-chart-card {
  border-top: 4px solid #8e44ad;
}

.trend-chart-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(142, 68, 173, 0.05) 0%, rgba(255, 255, 255, 0) 60%);
  z-index: 0;
  pointer-events: none;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #ebeef5;
  position: relative;
  z-index: 1;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  line-height: 50px;
}

.header-title .el-icon {
  font-size: 18px;
}

.follower-chart-card .header-title .el-icon {
  color: #67C23A;
}

.revenue-chart-card .header-title .el-icon {
  color: #409EFF;
}

.activities-card .header-title .el-icon {
  color: #E6A23C;
}

.trend-chart-card .header-title .el-icon {
  color: #8e44ad;
}

.card-header .el-radio-group {
  font-size: 12px;
  transform: scale(0.92);
  transform-origin: right center;
}

.card-header .el-radio-button--small {
  height: 28px;
}

.card-header .el-radio-button__inner {
  padding: 0 10px;
}

.chart {
  height: 360px;
  padding: 16px;
  position: relative;
  z-index: 1;
}

.activities-container {
  height: 360px;
  overflow-y: auto;
  text-align: left;
  padding: 10px 16px;
  position: relative;
  z-index: 1;
}

.activities-container::-webkit-scrollbar {
  width: 5px;
}

.activities-container::-webkit-scrollbar-thumb {
  background-color: #dcdfe6;
  border-radius: 3px;
}

.activities-container::-webkit-scrollbar-track {
  background-color: transparent;
}

.activity-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  transition: all 0.3s;
}

.activity-item:hover {
  background-color: rgba(0, 0, 0, 0.02);
  border-radius: 4px;
  padding: 8px 8px;
  margin: 0 -8px;
}

.activity-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 85%;
}

:deep(.el-timeline-item) {
  position: relative;
  padding-bottom: 15px;
}

:deep(.el-timeline-item__wrapper) {
  padding-bottom: 10px;
}

:deep(.el-timeline-item__timestamp) {
  font-size: 12px;
  color: #909399;
  margin-bottom: 8px;
  display: block;
}

:deep(.el-timeline-item__tail) {
  border-left: 2px solid #e4e7ed;
  left: 8px;
}

:deep(.el-timeline-item__node--normal) {
  width: 10px;
  height: 10px;
  left: 4px;
}

:deep(.el-timeline-item__content) {
  padding: 0 0 0 25px;
}

.activities-header {
  padding: 12px 16px;
}

.activities-header .header-title {
  display: flex;
  align-items: center;
  width: 100%;
}

.activities-header .el-radio-group {
  margin-left: auto;
  transform: scale(0.92);
  transform-origin: right center;
}

@media screen and (max-width: 1200px) {
  .data-card {
    max-width: calc(50% - 12px);
    margin-bottom: 16px;
  }

  .card-title {
    font-size: 13px;
  }

  .card-value {
    font-size: 24px;
  }

  .card-header-info {
    flex-direction: column;
    align-items: flex-start;
  }

  .card-trend,
  .card-info {
    margin-top: 4px;
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .card-header .el-radio-group {
    margin-top: 8px;
  }
}

@media screen and (max-width: 992px) {
  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .card-header .el-radio-group {
    margin-top: 8px;
  }
}

@media screen and (max-width: 768px) {
  .data-card {
    max-width: 100%;
    margin-right: 0;
  }

  .data-cards {
    flex-direction: column;
  }

  .card-content {
    padding: 12px;
  }

  .card-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .card-value {
    font-size: 22px;
  }

  .card-header-info {
    flex-direction: row;
  }

  .activities-container {
    height: 250px;
  }
}
</style>